<!DOCTYPE html>
<html>
<head>
  <title>transition/transform</title>
</head>
<style type="text/css">
  #div1 {
    float: left;
    height: 100px;
    width: 100px;
    background-color: red;
  }
  #div2 {
    float: left;
    height: 100px;
    width: 100px;
    background-color: green;
  }
  #div3 {
    float: left;
    height: 100px;
    width: 100px;
    background-color: blue;
  }
  #div4 {
    float: left;
    height: 100px;
    width: 100px;
    background-color: #234F21;
  }
  #div5 {
    float: left;
    height: 100px;
    width: 100px;
    background-color: #af123c;
  }
  #div6 {
    float: left;
    height: 100px;
    width: 100px;
    background-color: #affa3c;
  }
  /* transition 实现多个属性 */
  #div1:active {
    width:200px;
    height: 200px;
    transition: width 2s ease,height 2s ease;
    -moz-transition: width 2s ease,height 2s ease; /* Firefox 4 */
    -webkit-transition: width 2s ease,height 2s ease; /* Safari 和 Chrome */
    -o-transition: width 2s ease,height 2s ease; /* Opera */
  }
  /* transform 旋转 rotate */
  #div2:hover {
    transform:rotate(35deg);
    -ms-transform:rotate(35deg);     /* IE 9 */
    -moz-transform:rotate(35deg);     /* Firefox */
    -webkit-transform:rotate(35deg); /* Safari 和 Chrome */
    -o-transform:rotate(35deg);     /* Opera */
  }
  /* transform 缩放 scale */
  #div3:hover {
    transform:scale(0.8, 1.5);
    -ms-transform:scale(0.8, 1.5);     /* IE 9 */
    -moz-transform:scale(0.8, 1.5);     /* Firefox */
    -webkit-transform:scale(0.8, 1.5); /* Safari 和 Chrome */
    -o-transform:scale(0.8, 1.5);     /* Opera */
  }
  /* transform 倾斜 skew */
  #div4:hover {
    transform:skew(35deg);
    -ms-transform:skew(35deg);     /* IE 9 */
    -moz-transform:skew(35deg);     /* Firefox */
    -webkit-transform:skew(35deg); /* Safari 和 Chrome */
    -o-transform:skew(35deg);     /* Opera */
  }
  /* transform 移动 translate */
  #div5:hover {
    transform:translate(45px, 45px);
    -ms-transform:translate(45px, 45px);     /* IE 9 */
    -moz-transform:translate(45px, 45px);     /* Firefox */
    -webkit-transform:translate(45px, 45px); /* Safari 和 Chrome */
    -o-transform:translate(45px, 45px);     /* Opera */
  }
  /* transform 多个效果 */
  #div6:hover {
    transform:rotate(35deg) scale(0.8, 1.5) skew(35deg) translate(45px, 45px);
    -ms-transform:rotate(35deg) scale(0.8, 1.5) skew(35deg) translate(45px, 45px);     /* IE 9 */
    -moz-transform:rotate(35deg) scale(0.8,rotate(35deg) scale(0.8, 1.5) skew(35deg) translate(45px, 45px)translate(45px, 45px); /* Safari 和 Chrome */
    -o-transform:rotate(35deg) scale(0.8, 1.5) skew(35deg) translate(45px, 45px);     /* Opera */
  }
</style>
<body>
<div id="div1">transition</div>
<div id="div2">transform rotate</div>
<div id="div3">transform scale</div>
<div id="div4">transform skew</div>
<div id="div5">transform translate</div>
<div id="div6">transform</div>
</body>
</html>
